<template>
	<div class="home-wrapper" id="homeBackground">
		<div class="content-parallax">
			<h1>欢迎使用月半猫网盘</h1>
			<!-- 功能介绍 -->
			<div class="function-wrapper">
				<div class="function-title">功能介绍</div>
				<ul class="function-list">
					<li
						class="function-item"
						v-for="(item, index) in functionList"
						:key="index"
						@mouseenter="hoveredItem = item"
						@mouseleave="hoveredItem = null"
					>
						<a
							class="function-link"
							:href="item.link"
							target="_blank"
						>
							<div class="img-wrapper">
								<img class="img" :src="item.icon" />
							</div>
							<div class="content">
								<h3 class="title">{{ item.title }}</h3>
								<div class="highlight-cards">
									<span
										v-for="(highlight, hIndex) in item.highlights"
										:key="hIndex"
										class="highlight-card"
									>{{ highlight }}</span>
								</div>
							</div>
						</a>
					</li>
				</ul>
				<div
					v-if="hoveredItem"
					class="tooltip"
					:style="{ top: tooltipPosition.y + 'px', left: tooltipPosition.x + 'px' }"
				>
					{{ hoveredItem.description }}
				</div>
			</div>
		</div>
		<!-- 公告区域
		<div class="notice-wrapper">
			<div class="notice-inner">
				<img class="notice-img" :src="noticeImg" alt="平台公告" />
				<ul class="notice-list">
					<li v-for="(item, index) in noticeList" :key="index">
						<transition name="el-zoom-in-top">
							<div
								class="notice-item"
								v-show="activeNoticeIndex === index"
								@click="
									$router.push({
										name: 'NoticeDetail',
										params: { noticeId: item.noticeId }
									})
								"
							>
								<span class="notice-title">{{ item.title }}</span>
								<span class="create-time">{{ item.createTime }}</span>
							</div>
						</transition>
					</li>
				</ul>
				<el-button
					class="change-btn"
					size="medium"
					type="text"
					icon="el-icon-arrow-up"
					:disabled="activeNoticeIndex === 0"
					@click="handleChangePage('up')"
				></el-button>
				<div class="page-count">
					{{ activeNoticeIndex + 1 }} / {{ noticeList.length }}
				</div>
				<el-button
					class="change-btn"
					size="medium"
					type="text"
					icon="el-icon-arrow-down"
					:disabled="activeNoticeIndex === noticeList.length - 1"
					@click="handleChangePage('down')"
				></el-button>
				<el-divider direction="vertical"></el-divider>
				<el-button
					type="primary"
					class="all-btn"
					@click="$router.push({ name: 'Notice' })"
				>查看全部</el-button>
			</div>
		</div> -->
	</div>
</template>

<script>
import { getNoticeList } from '_r/home.js'
import CanvasNest from 'canvas-nest.js'

// 配置
const config = {
	color: '64, 158, 255', // 线条颜色
	pointColor: '64, 158, 255', // 节点颜色
	opacity: 0.5, // 线条透明度
	count: 199, // 线条数量
	zIndex: 0 // 画面层级，调整为 0，确保在内容层后面
}

export default {
	name: 'Home',
	data() {
		return {
			functionList: [
				{
					icon: require('_a/images/home/function/delete.png'),
					title: '回收站功能',
					highlights: ['误删找回', '彻底删除', '安全保障'],
					description: '可以恢复误删文件，安全删除确保数据安全。'
				},
				{
					icon: require('_a/images/home/function/type.png'),
					title: '多维度文件分类',
					highlights: ['图片文档', '视频音乐', '灵活切换'],
					description: '提供多维度分类方式，轻松浏览、切换文件类型。'
				},
				{
					icon: require('_a/images/home/function/search.png'),
					title: '全局搜索',
					highlights: ['一键查找', '快速定位'],
					description: '支持文件全局搜索，精准定位所需文件，提高效率。'
				},
				{
					icon: require('_a/images/home/function/share.png'),
					title: '文件分享',
					highlights: ['安全分享', '提取码', '有效期'],
					description: '支持文件分享功能，可设置提取码和有效期，分享更安全。'
				},
				{
					icon: require('_a/images/home/function/operation.png'),
					title: '便捷操作',
					highlights: ['拖拽上传', '批量管理', '高效操作'],
					description: '支持文件拖拽上传、批量管理，操作更加高效便捷。'
				},
				{
					icon: require('_a/images/home/function/preview.png'),
					title: '在线预览',
					highlights: ['多格式', '即点即看'],
					description: '无需下载，支持多种格式的文件直接在线预览。'
				}
			],
			noticeImg: require('_a/images/home/notice/noticeTip.png'),
			activeNoticeIndex: 0,
			noticeList: [],
			noticeIntervalTimer: null,
			canvasNestConfig: config,
			hoveredItem: null,
			tooltipPosition: { x: 0, y: 0 }
		}
	},
	mounted() {
		document.addEventListener('mousemove', this.updateTooltipPosition);
	},
	beforeDestroy() {
		document.removeEventListener('mousemove', this.updateTooltipPosition);
		this.getNoticeListData()
		this.$nextTick(() => {
			let element = document.getElementById('homeBackground')
			new CanvasNest(element, this.canvasNestConfig)
		})
	},
	methods: {
		updateTooltipPosition(e) {
			this.tooltipPosition.x = e.pageX + 15; // 鼠标右边偏移15px
			this.tooltipPosition.y = e.pageY + 15; // 鼠标下边偏移15px
		},
		getNoticeListData() {
			getNoticeList().then((res) => {
				if (res.success) {
					this.noticeList = res.dataList.slice(0, 3)
					this.setNoticeInterval()
				}
			})
		},
		setNoticeInterval() {
			this.noticeIntervalTimer = setInterval(() => {
				if (this.activeNoticeIndex < this.noticeList.length - 1) {
					this.activeNoticeIndex++
				} else {
					this.activeNoticeIndex = 0
				}
			}, 3000)
		},
		handleChangePage(type) {
			clearInterval(this.noticeIntervalTimer)
			if (type === 'up') {
				this.activeNoticeIndex--
			} else if (type === 'down') {
				this.activeNoticeIndex++
			}
			this.setNoticeInterval()
		}
	}
}
</script>

<style lang="stylus" scoped>
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+Kuai+Le&display=swap');
@import '~_a/styles/varibles.styl';
@import '~_a/styles/mixins.styl';

.tooltip {
	position: fixed;
	background: rgba(173, 216, 230, 0.9); /* 浅蓝色 */
	color: #333; /* 深色文字 */
	padding: 8px 12px;
	border-radius: 12px; /* 圆角更圆润 */
	font-size: 14px;
	max-width: 220px;
	z-index: 9999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	white-space: normal;
}


.home-wrapper {
	width: 100% !important;
	flex-direction: column;
	position: relative;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	padding: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin-top: -60px;

	h1 {
		font-family: 'ZCOOL Kuai Le', cursive;
		font-size: 3.5em;
		color: #333;
		font-weight: 900;
		margin-bottom: 20px;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
	}
}

.content-parallax {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	z-index: 1;

	.function-wrapper {
		margin-bottom: 40px;
		width: 100%;

		.function-title {
			padding: 40px 0;
			text-align: center;
			font-size: 32px;
			font-weight: bold;
			letter-spacing: 2px;
			animation: fadeInScale 1s ease-out forwards;
			opacity: 0;
			color: #333;
			font-family: 'ZCOOL Kuai Le', cursive;
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
		}

		.function-list {
			max-width: 1200px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 32px;
			list-style: none;
			padding: 0;
			justify-content: center;
			.function-item {
				margin-bottom: 0;
				width: auto;
				transition: transform 0.2s, box-shadow 0.2s;
				animation: fadeInSlideUp 0.6s ease-out forwards;
				opacity: 0;
				transform: scale(0.98);
				&:nth-child(1) { animation-delay: 0.1s; }
				&:nth-child(2) { animation-delay: 0.2s; }
				&:nth-child(3) { animation-delay: 0.3s; }
				&:nth-child(4) { animation-delay: 0.4s; }
				&:nth-child(5) { animation-delay: 0.5s; }
				&:nth-child(6) { animation-delay: 0.6s; }
				.function-link {
					display: block;
					border-radius: 16px;
					background: linear-gradient(135deg, #E1F5FE 0%, #81D4FA 100%);
					width: 100%;
					height: 100%;
					padding: 40px 24px 32px 24px;
					text-align: center;
					box-shadow: 0 4px 12px rgba(129, 212, 250, 0.3), 0 8px 24px rgba(129, 212, 250, 0.2);
					transition: all 0.3s ease;
					&:hover {
						background: linear-gradient(135deg, #4FC3F7 0%, #2196F3 100%);
						box-shadow: 0 0 0 6px rgba(33, 150, 243, 0.4),
						0 0 20px rgba(33, 150, 243, 0.6),
						0 20px 40px rgba(0, 0, 0, 0.3);
						animation: none;
						transform: scale(1.05) translateY(-10px);
						.content {
							.title,
							.highlight-cards {
								color: #fff;
							}
						}
						.img-wrapper {
							transform: scale(1.35) rotateZ(25deg);
						}
					}
					.img-wrapper {
						border-radius: 50%;
						background: linear-gradient(135deg, #F8F8FF 60%, #F0F8FF 100%);
						box-shadow: 0 2px 8px rgba(0,0,0,0.08);
						margin: 0 auto 16px auto;
						padding: 18px 0;
						width: 100px;
						height: 100px;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: transform 0.3s ease;
						.img {
							width: 70px;
							height: 70px;
						}
					}
					.content {
						margin-top: 24px;
						.title {
							margin: 0 0 16px 0;
							color: #333;
							font-weight: bold;
							font-size: 20px;
							letter-spacing: 1px;
						}
						.highlight-cards {
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							gap: 8px;
							margin-top: 16px;
							.highlight-card {
								background: transparent;
								border-radius: 4px;
								padding: 4px 8px;
								font-size: 13px;
								color: #333;
								white-space: nowrap;
								transition: background 0.3s ease;
								&:hover {
									background: rgba(0, 0, 0, 0.05);
								}
							}
						}
					}
				}
			}
		}
	}
}

.notice-wrapper {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(33,150,243,0.08);
	padding: 32px 0;
	margin-bottom: 32px;
	.notice-inner {
		width: 100%;
		max-width: 900px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.notice-img {
			margin-right: 16px;
			height: 32px;
		}
		.notice-list {
			height: 40px;
			line-height: 40px;
			padding-right: 24px;
			overflow: hidden;
			flex: 1;
			list-style: none;
			.notice-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $RegularText;
				font-size: 16px;
				cursor: pointer;
				font-weight: 500;
				&:hover {
					color: $Primary;
				}
				.notice-title {
					padding-right: 16px;
				setEllipsis(1)
				}
			}
		}
		.change-btn {
			::v-deep i[class^=el-icon-] {
				font-weight: 600;
				font-size: 20px;
			}
		}
		.page-count {
			margin: 0 8px;
			font-size: 15px;
			color: $RegularText;
			font-weight: bold;
		}
		.all-btn {
			border-radius: 20px;
			background: linear-gradient(90deg, #42a5f5 0%, #478ed1 100%);
			color: #fff;
			font-weight: bold;
			padding: 8px 24px;
			transition: background 0.2s;
			&:hover {
				background: linear-gradient(90deg, #478ed1 0%, #42a5f5 100%);
				color: #fff;
			}
		}
	}
}

@keyframes fadeInScale {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeInSlideUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>

